<template>
    <div id="app">
      <el-input
            placeholder="表单KEY"
            clearable
            style="width: 200px;margin: 0px;padding: 0px;"
            size="mini"
            @keyup.enter.native="saveFormJson"
            prefix-icon="el-icon-search"
            v-model="formId">
          </el-input>&nbsp;&nbsp;
      <el-button type="primary" @click="saveFormJson">保存</el-button>
      <v-form-designer ref="vfDesigner" :banned-widgets="testBanned"
                     :designer-config="designerConfig">
        <!-- 自定义按钮插槽演示 -->
      </v-form-designer>
  
    </div>
  </template>
  
  <script>
  export default {
    name: 'App',
    
    data() {
      return {
        formId:'',
        ddmform:{
          id:'',
          formname:'',
          formvalue:''
        },
        testBanned: [
          //'sub-form',
          //'alert',
        ],
  
        designerConfig: {
          languageMenu: true,
          //externalLink: false,
          //formTemplates: false,
          //eventCollapse: false,
          //clearDesignerButton: false,
          //previewFormButton: false,
  
          //presetCssCode: '.abc { font-size: 16px; }',
        }
      }
    },
    methods: {
      saveFormJson() {
        let formJson = this.$refs.vfDesigner.getFormJson()
        //TODO: 将formJson提交给后端保存接口，需自行实现！！
        console.log(formJson);
        this.ddmform.formvalue = JSON.stringify(formJson);
        this.ddmform.formname=this.formId;
        this.postRequest("/ddm/addDdmForm/",this.ddmform).then(resp => {
          console.log(resp.data);
            this.$message.success('表单已保存！');
          })
        
      },
  
    }
  }
  </script>
  
  <style >
    #app {
      height: 100%;
    }
  </style>  